<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-card class="login_form">
          <h1>欢迎注册</h1>
          <el-form :model="registerForm" :rules="rules" ref="registerFormRef">
            <el-form-item label="账号" prop="userId">
              <el-input
                  v-model="registerForm.userId"
                  clearable
                  placeholder="请您输入要注册的账号"
                  size="large"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="userPassword">
              <el-input
                  type="password"
                  show-password
                  v-model="registerForm.userPassword"
                  size="large"
                  placeholder="请您输入密码"
                  clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="checkPassword">
              <el-input
                  type="password"
                  show-password
                  v-model="registerForm.checkPassword"
                  size="large"
                  placeholder="请您再次输入密码"
                  clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-radio-group v-model="registerForm.userType">
              <el-radio label="user">用户注册</el-radio>
              <el-radio label="merchant">商家入驻</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-form-item>
            <div class="button-container">
              <el-button
                  :loading="loading"
                  class="login_btn"
                  type="primary"
                  size="default"
                  @click="Register"
              >注册
              </el-button>
              <div class="spacer"></div>
              <el-button
                  class="extra_btn"
                  type="primary"
                  size="default"
                  @click="router.push('/login')"
              >去登录
              </el-button>
            </div>
          </el-form-item>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="Login">
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {ElForm, ElFormItem, ElInput, ElButton, ElMessage,ElNotification } from "element-plus";
import type {
  ResponseData,
} from '@/api/user/type'
import { reqRegister} from "@/api/user";

const router = useRouter();

const registerForm = reactive({
  userId: "",
  userPassword: "",
  checkPassword:"",
  userType:"user"
});
const rules = {
  userId: [
    {required: true, message: "请输入账号", trigger: "blur"},
    {min: 4, message: "账号长度不能少于4位", trigger: "blur"}
  ],
  userPassword: [
    {required: true, message: "请输入密码", trigger: "blur"},
    {min: 8, message: "密码长度不能少于8位", trigger: "blur"}
  ],
  checkPassword: [
    {required: true, message: "请再次输入密码", trigger: "blur"},
    {min: 8, message: "密码长度不能少于8位", trigger: "blur"}
  ]
};
const registerFormRef = ref(null);

let loading = ref(false)
const Register =  () => {
  registerFormRef.value.validate( async (valid: Boolean) => {
    if (valid){
      let res : ResponseData= await reqRegister(registerForm);
      if (res.code === 0) {
        router.push('/login');
        ElNotification({
          type: 'success',
          message: '注册成功',
          title: `请登录`,
        })
      } else {
        //提示信息注册失败
        ElMessage.error(res.message);
      }
      loading.value = false
    }
  });
}

</script>


<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
  position: fixed;
  .login_form {
    position: relative;
    width: 55%;
    top: 25vh;
    left: 10vw;
    padding: 10px;
    background: transparent;
    h1 {
      background: linear-gradient(to right, blue, rgb(35, 60, 70));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 40px;
      text-align: center;
      font-weight: 700;
      margin-bottom: 40px;
      margin-top: -10px;
    }
    .button-container {
      display: flex;
      width: 100%;
    }

    .login_btn, .extra_btn {
      flex: 1;
    }

    .spacer {
      width: 10px; /* 设置间隔宽度 */
    }
  }
}
.el-card {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}
</style>